<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*table是块元素*/
            table {
                width: 50%;
                border: 1px solid black;
                margin: 0 auto;

                /*
                    border-spacing:
                        指定边框之间的距离
                */
                /*border-spacing: 0px;*/
                /*border-collapse:  设置边框的合并*/
                border-collapse: collapse;
            }

            td {
                border: 1px solid black;
                height: 100px;
                /*  默认情况下元素在td中是垂直居中的  可以通过 vertical-align来修改*/
                vertical-align: middle;
                text-align: center;
            }

            /*
                如果表格中没有使用tbody而是直接使用tr,
                    那么浏览器会直接创建一个tbody,并且将tr全部放进tbody
                选中偶数列,如果是2n+1选中奇数列
                odd也可以选中奇数列
            */
            tbody > tr:nth-child(odd) {
                background-color: #bfa;
            }

            .box1 {
                width: 300px;
                height: 300px;
                background-color: orange;

                /*
                    将元素设置为单元格
                        获取单元格的特性
                */
                display: table-cell;

                /*  设置子元素为垂直居中  */
                vertical-align: middle;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin: 0 auto ;

            }

        </style>
    </head>
    <body>

        <div class="box1">
            <div class="box2"></div>
        </div>

        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>地址</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>18</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>28</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>38</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐三藏</td>
                <td>男</td>
                <td>48</td>
                <td>女儿国</td>
            </tr>


        </table>
    </body>
</html>